<template>
  <div>
    <div
      v-if="cardDataProp.signUrl"
      class="tab">
      <div
        class="tab-item"
        :class="{'active': contentIndex == item.key }"
        @click="contentTabChange(item)"
        :key="item.key"
        v-for="item in tabContents">{{ item.label }}</div>
    </div>
    <div
      class="qualification-pic-info-card"
      :class="[!cardDataProp.signUrl ? 'showSignUrl': contentIndex==1 ? 'showSign' :'']">
      <p class="licenceCardTitle">
        <custom-tooltip
          :width="!cardDataProp.signUrl ? '80%' : '50%'"
          style="display: inline-block;"
          :value="licenceType === 'normal' ? cardDataProp.licenceTypeStr : cardDataProp.certificateNo + cardDataProp.certificateNo" />
        <span
          v-if="cardDataProp.signUrl"
          class="blue-tip">
          已完成电子签章
        </span>
        <!-- <span class="title-text">
        </span> -->
        <el-checkbox
          class="cardCheck"
          @change="sendOutIdx"
          v-if="computeSelOps"
          v-model="cardDataProp.checked"/>
        <span
          class="deleteCard"
          v-if="computeDeleteOps"
          @click="deleteCurPic"> &times;</span>
      </p>
      <div
        v-if="contentIndex == 0"
        class="licenceDetail">
        <i
          v-if="isPdf || (!cardDataProp.pictureUrl && !cardDataProp.url)"
          class="iconfont iconpdf"/>
        <!-- <div
          v-viewer
          v-if="isPdf"
          :url="pdfFace">
          <el-image
            :src="pdfFace"
            :fit='fitType'/>
        </div> -->
        <div
          v-viewer
          v-else
          :url="contentIndex == 1 ? pdfFace : licenceType === 'normal' ? cardDataProp.url : cardDataProp.pictureUrl">
          <el-image
            :src="contentIndex == 1 ? pdfFace : licenceType === 'normal' ? cardDataProp.url : cardDataProp.pictureUrl"
            :fit='fitType'/>
        </div>
        <div
          class="info-body"
          v-show='licenceType === "normal"'>
          <custom-tooltip
            label="有效期从"
            :value="formatDateTime(cardDataProp.startDate)" />
          <custom-tooltip
            label="截止日期"
            :value="formatDateTime(cardDataProp.endDate)" />
          <custom-tooltip
            label="长期有效"
            :value="cardDataProp.effectiveness===0 ?'否':'是'" />
          <custom-tooltip
            label="证件编号"
            :value="cardDataProp.licenceCode + '1212121212'" />
          <custom-tooltip
            label="证件名称"
            :value="cardDataProp.licenceName" />
        </div>
        <div
          class="info-body"
          v-show='licenceType === "register"'>
          <custom-tooltip
            label="产品名称"
            :value="cardDataProp.productNameCN" />
          <custom-tooltip
            label="有效期至"
            :value="formatDateTime(cardDataProp.expireDate)" />
          <custom-tooltip
            label="注册人名称"
            :value="cardDataProp.registrantName" />
          <custom-tooltip
            label="生产企业"
            :value="cardDataProp.manufacturer" />
          <custom-tooltip
            label="类型"
            :value="cardDataProp.type === 0?'国产':'进口'" />
        </div>
      </div>
      <div
        v-if="contentIndex == 1"
        class="licenceDetail">
        <div
          v-viewer
          v-if="isPdf"
          :url="pdfFace">
          <el-image
            :src="pdfFace"
            :fit='fitType'/>
        </div>
        <div
          v-viewer
          v-else
          :url="contentIndex == 1 ? pdfFace : licenceType === 'normal' ? cardDataProp.url : cardDataProp.pictureUrl">
          <el-image
            :src="contentIndex == 1 ? pdfFace : licenceType === 'normal' ? cardDataProp.url : cardDataProp.pictureUrl"
            :fit='fitType'/>
        </div>
        <div
          class="info-body"
          v-show='licenceType === "normal"'>
          <custom-tooltip
            label="有效期从"
            :value="formatDateTime(cardDataProp.startDate)" />
          <custom-tooltip
            label="截止日期"
            :value="formatDateTime(cardDataProp.endDate)" />
          <custom-tooltip
            label="长期有效"
            :value="cardDataProp.effectiveness===0 ?'否':'是'" />
          <custom-tooltip
            label="证件编号"
            :value="cardDataProp.licenceCode + '1212121212'" />
          <custom-tooltip
            label="证件名称"
            :value="cardDataProp.licenceName" />
        </div>
        <div
          class="info-body"
          v-show='licenceType === "register"'>
          <custom-tooltip
            label="产品名称"
            :value="cardDataProp.productNameCN" />
          <custom-tooltip
            label="有效期至"
            :value="formatDateTime(cardDataProp.expireDate)" />
          <custom-tooltip
            label="注册人名称"
            :value="cardDataProp.registrantName" />
          <custom-tooltip
            label="生产企业"
            :value="cardDataProp.manufacturer" />
          <custom-tooltip
            label="类型"
            :value="cardDataProp.type === 0?'国产':'进口'" />
        </div>
      </div>
    </div>
    <el-button
      :disabled="contentIndex==0 && !showSignBtn"
      @click="electronicStamp"
      class="electronicStamp">{{ contentIndex==0? '电子签章':'预览' }}</el-button>
  </div>
</template>
<script>
import { fitType } from '@const/common.js'
import { formatDate } from '@const/filter'
// 定制化的tooltip
import CustomTooltip from '@components/custom-tooltip'
export default {
  name: 'QualificationPicInfoCardTab',
  components: { CustomTooltip },
  data () {
    return {
      pdfFace: require('@assets/img/pdf.png'),
      fitType,
      showSignBtn: this.showSign,
      cardDataProp: this.cardData,
      tabContents: [
        {
          label: '原始版本',
          key: 0
        },
        {
          label: '签章版本',
          key: 1
        }
      ],
      contentIndex: 0
    }
  },
  watch: {
    cardData (val) {
      this.cardDataProp = val
    }
  },
  computed: {
    computeDeleteOps () {
      if (this.cardType === '0' || this.cardType === '3') {
        return true
      }
      return false
    },
    computeSelOps () {
      if (this.cardType === '1' || this.cardType === '3') {
        return true
      }
      return false
    },
    isPdf () {
      let url = this.cardDataProp.url || this.cardDataProp.pictureUrl
      if (url && url.includes('pdf')) {
        return true
      } else {
        return false
      }
    }
  },
  props: {
    cardData: {
      default () {
        return {}
      },
      type: Object,
      required: true
    },
    showSign: {
      type: Boolean,
      default: true
    },
    // '0'为删除，'1'为添加，'2'为默认值，什么都不传就是只读,新增加第三种状态，即可选中，亦可删除。即cardType为3
    cardType: {
      type: String,
      default: '2'
    },
    // 图片类型，{'company':'0','product':'1','register':'2'}
    picType: {
      type: String,
      default: ''
    },
    licenceType: {
      type: String,
      default: 'normal'
    },
    idx: {
      type: Number,
      default: 0
    },
    // 是否显示checkbox，即是否可选中，默认false
    isCheck: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    contentTabChange (item) {
      this.contentIndex = item.key
    },
    formatDateTime (time) {
      return formatDate(time, 'YYYY-MM-DD')
    },
    sendOutIdx () {
      this.$emit('sendIdx', this.idx)
    },
    deleteCurPic () {
      this.$emit('sendDelete', this.idx, this.picType)
    },
    electronicStamp () {
      this.$emit('electronicStamp', this.cardDataProp, this.contentIndex)
    }
    // sendOutPutId (checked, url) {
    //   console.log(checked,url)
    //   this.$emit('sendOutPutId', { checked, url })
    // }
  }
}
</script>
<style lang="less">
.qualification-pic-info-card {
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  position: relative;

  .licenceCardTitle {
    margin-bottom: 24px;
    height: 20px;
    width: 100%;
  }

  .title-text {
    display: inline-block;
    width: 100%;
    margin-right: -20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .blue-tip {
    font-size: 12px;
    padding: 0 5px;
    display: inline-block;
    vertical-align: super;
    border-radius: 3px;
    color: white;
    background: #178d0c;
  }

  .cardCheck {
    position: absolute;
    right: 30px;
    top: 0;
    line-height: 50px;
  }

  .deleteCard {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    right: 20px;
    top: 0;
  }

  .licenceDetail {
    width: 100%;
    height: 100%;
    display: flex;

    .info-body {
      width: 160px;
    }

    .el-image {
      margin-right: 10px;
      width: 174px;
      height: 120px;
    }

    .card-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    p span:first-child {
      color: #93a0b2;
      margin-right: 4px;
    }
  }

  .iconpdf {
    color: #ccc;
    font-size: 90px;
    width: 168px;
  }
}
.tab {
  border-bottom: 1px solid rgba(238, 240, 245, 1);
  .tab-item {
    display: inline-block;
    width: 50%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    background: rgba(238, 240, 245, 1);
    font-weight: bold;
  }
  .active {
    background: #fff;
    color: #2371c5;
  }
}
.electronicStamp {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(238, 240, 245, 1);
}
/deep/.el-card__body {
  height: auto;
  padding: 0;
}
// .showSignUrl {
//   padding-top: 33px !important;
// }
// .showSign {
//   padding-bottom: 43px !important;
// }
</style>
